<template>
    <!-- 页面的主要内容区域 -->
    <view class="content">
        <!-- 可滚动的视图，用于显示问题提问区域 -->
        <scroll-view class="question">
            <!-- 使用 v-for 遍历 historys 数组，为每个元素生成一个视图 -->
            <view class="item" :class="{reverse :item.role!='user'}" v-for="(item,index) in historys">
                <!-- 显示对话内容的文本 -->
                <text class="text">{{item.content}}</text>
                <!-- 根据角色不同显示不同的图标，user 角色显示 person 图标，其他角色显示 chatboxes 图标 -->
                <uni-icons :type="item.role=='user'?'person':'chatboxes'" size="25" color="whitesmoke"></uni-icons>
            </view>
        </scroll-view>
        <!-- 提问区域 -->
        <view class="word">
            <!-- 输入框，用于输入提问内容，使用 v-model 绑定 word 变量 -->
            <uni-easyinput class="input" v-model="word" placeholder="请输入内容" />
            <!-- 点击按钮触发 doQuestion 方法进行提问 -->
            <view class="btn" @tap="doQuestion">提问</view>
        </view>
    </view>
</template>

<script setup>
    // 从 Vue 导入 ref 函数
    import { ref } from "vue"
    // 从 uni-app 导入 onLoad 函数
    import { onLoad } from '@dcloudio/uni-app'
    // 导入自定义的配置文件
    import { CONFIG } from '../../utils/config';

    // 在页面加载时调用 doQuestion 方法
    onLoad(() => {
        doQuestion()
    })

    // 定义一个响应式变量 word，用于存储用户输入的内容
    const word = ref("")
    // 定义一个响应式数组 historys，用于存储对话记录
    const historys = ref([])
    // 定义一个提问模型对象，包含模型名称、消息列表和温度参数
    const model = {
        "model": "moonshot-v1-8k",
        "messages": [],
        "temperature": 0.3
    }
    // 定义一个异步函数 doQuestion 用于向 kimi 提问
    async function doQuestion() {
        // 如果输入框为空，显示提示信息
        if (word.value == "") {
            uni.showToast({
                title: "请输入提问内容！",
                icon: 'none'
            })
        } else {
            // 将用户输入添加到历史记录中，并标记角色为 user
            historys.value.push({
                "role": "user",
                "content": word.value
            })
            // 将历史记录赋值给模型的消息列表
            model.messages = historys.value
            // 向服务器发送 POST 请求并等待响应
            let res = await uni.$post(CONFIG.kimi_url + "/v1/chat/completions", model)
            // 打印响应中第一个选择的消息
            console.log(res.choices[0].message)
            // 将响应消息添加到历史记录中
            historys.value.push(res.choices[0].message)
            // 清空输入框
            word.value = ""
        }
    }
</script>

<style lang="scss" scoped>
   .content {
        // 设置背景图片和大小
        background-image: url(/static/image/Aibeijing.png) ;
        background-size: 100%  100%;
        height: calc(100vh - 97px);
        // 相对定位
        position: relative;

       .question {
            // 可滚动区域的高度
            height: calc(100vh - 97px - 45px);
            color: white;

           .item {
                // 显示为 flex 布局
                display: flex;
                width: 730rpx;
                margin-top: 5px;
                // 内容靠右对齐
                justify-content: end;
               .text {
                    // 文本的边框、圆角和内边距
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    padding: 5px;
                    font-size: 14px;
                }
            }
            // 当 item 的 role 不为 user 时应用的类，将布局反转
           .reverse{
                flex-direction: row-reverse;
            }
        }

       .word {
            // 绝对定位，位于底部
            position: absolute;
            bottom: 0;
            width: 720rpx;
            height: 85rpx;
            // 显示为 flex 布局，内容垂直居中
            display: flex;
            align-items: center;
            padding: 0 5px;

           .btn {
                // 按钮的样式，颜色、背景色、边框、圆角等
                color: whitesmoke;
                background-color: #ccc;
                height: 35px;
                border: 1px solid #ccc;
                border-radius: 5px;
                width: 100px;
                text-align: center;
                line-height: 35px;
                margin-left: 5px;
                cursor: pointer;
            }
        }
    }
</style>